<template>
    <div>
        <div>
            <el-form :inline="true" :model="order" class="demo-form-inline">
                <el-form-item label="商品标题">
                    <el-input v-model="order.title" placeholder="商品标题" clearable />
                </el-form-item>
                <el-form-item label="金额">
                    <el-input v-model="order.amount" placeholder="金额" clearable />
                </el-form-item>
            </el-form>
            <el-button @click="scanCodePay">蛟龙支付</el-button>
        </div>
        <el-image class="qrCodeImage" :src="qrCode" style="margin-top: 20px;"></el-image>
        <p>{{ msg }}</p>
        <div class="mb-4" style="margin-top: 30px">
            <p>第三方支付平台</p>
            <el-button class="wayButtonImage AliPay" @click="buttonAliPay"></el-button>
            <el-button class="wayButtonImage WxPay"></el-button>
        </div>
        <div id="myDiv">

        </div>

    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            baseUrl: 'http://1a702e43.r26.cpolar.top/api',
            qrCode: '', // 支付二维码
            alipayPage: '',
            msg:'',
            // 支付参数
            order: {
                macNo: 'M1621873433953', // 商户号
                title: '联想拯救者R7000p', // 商品标题
                amount: 128, // 订单金额,单位分
            }
        }
    },

    methods: {

        // 生成一个订单二维码
        scanCodePay() {
            axios.post(
                this.baseUrl + '/jiaolongpay/getQRCode',
                this.order,
                {
                responseType: "blob"
            }).then((response) => {
                const blob = response.data;
                const reader = new FileReader();
                reader.onload = () => {
                    this.qrCode = reader.result; // 将二维码数据转换为 base64 格式
                };
                reader.readAsDataURL(blob);
                this.msg = '请扫码支付';
            }).catch((err) => {
                console.log('服务器错误', err);
            })
        },

        buttonAliPay() {
            axios.post(
                this.baseUrl + '/alipay/payScanCode',
                this.order,
                {
                    responseType: 'blob',
                }
            ).then(response => {
                const blob = response.data;
                const reader = new FileReader();
                reader.onload = () => {
                    this.qrCode = reader.result; // 将二维码数据转换为 base64 格式
                };
                reader.readAsDataURL(blob);
                this.msg = '请扫码支付';
            }).catch(err => {
                console.log('服务器错误', err);
            })
        }

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wayButtonImage {
    background-size: cover;
    width: 100px;
    height: 100px;
}

.AliPay {
    background-image: url("https://img.phb123.com/uploads/allimg/220809/810-220P9110A20-L.png");
}

.WxPay {
    background-image: url("https://p1.ssl.qhimg.com/t0167e9e54f989c0215.jpg");
}

.qrCodeImage {
    width: 200px;
    height: 200px;
}
</style>
